<template>
	<view class="page bg-w">
		<view class="pl30 bg-w box-shadow-bottom unio2o-nav-body">
			<scroll-view class="unio2o-nav" scroll-x="true">
				<view v-for="(item,index) in types" :key="index" :data-index="index" @click="scrollSelect" :class="{'on':selectIndex == index}" class="item">
					<view class="pt20">{{item}}</view>
					<view class="bg-main"></view>
				</view>
			</scroll-view>
		</view>
		
		<scroll-view v-if="isEmpty == false" class="order-main" scroll-y="true">
			<view class="pd30">
				<view v-for="(order, index) in orderList" :key="index" class="mb30">
					<view class="order-card bdr16 bg-w pd30">
						<view class="order-header">
							<view class="order-number">订单号：{{order.order_no}}</view>
							<view class="order-status" :class="order.status_class">{{order.status_text}}</view>
						</view>
						
						<view class="order-content">
							<image :src="order.goods_image" mode="aspectFill" class="goods-image"></image>
							<view class="goods-info">
								<view class="goods-title">{{order.goods_title}}</view>
								<view class="goods-price">¥{{order.goods_price}}</view>
								<view class="commission-info">
									<text class="commission-label">佣金：</text>
									<text class="commission-value">¥{{order.commission}}</text>
									<text class="commission-rate">({{order.commission_rate}}%)</text>
								</view>
								<view class="buyer-info">
									<text class="buyer-label">买家：</text>
									<text class="buyer-name">{{order.buyer_name}}</text>
								</view>
							</view>
						</view>
						
						<view class="order-meta">
							<view class="meta-item">
								<text class="label">下单时间：</text>
								<text class="value">{{order.create_time}}</text>
							</view>
							<view class="meta-item">
								<text class="label">支付时间：</text>
								<text class="value">{{order.pay_time || '-'}}</text>
							</view>
							<view class="meta-item">
								<text class="label">结算时间：</text>
								<text class="value">{{order.settle_time || '-'}}</text>
							</view>
						</view>
						
						<view class="order-actions">
							<button class="action-btn view-btn" @click="viewOrder(order.id)">查看详情</button>
							<button v-if="order.status === 'pending'" class="action-btn trace-btn" @click="traceOrder(order)">追踪物流</button>
							<button v-if="order.status === 'settled'" class="action-btn earnings-btn" @click="viewEarnings(order)">查看收益</button>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		
		<view v-if="isEmpty" class="unio2o-order-empty bg-w">
			<view class="flex center">
				<image :src="''"></image>
			</view>
			<view class="text-center mt30 ft14 text-notice">暂无分销订单</view>
			<button class="btn-main mt30" @click="goDistribution">去分销商品</button>
		</view>
	</view>
</template>

<script>
import { mapState } from 'vuex';

export default {
	data() {
		return {
			selectIndex: 0,
			isEmpty: false,
			types: [
				'全部',
				'待结算',
				'已结算',
				'已失效'
			],
			orderList: [
				{
					id: 1,
					order_no: 'DIST202401150001',
					goods_title: '豪华双人汉堡套餐',
					goods_price: '39.90',
					goods_image: 'https://picsum.photos/seed/distorder1/100/100.jpg',
					commission: '9.98',
					commission_rate: '25',
					buyer_name: '张先生',
					status: 'settled',
					status_text: '已结算',
					status_class: 'settled',
					create_time: '2024-01-15 14:30:25',
					pay_time: '2024-01-15 14:31:15',
					settle_time: '2024-01-16 10:30:00'
				},
				{
					id: 2,
					order_no: 'DIST202401150002',
					goods_title: '专业SPA护理套餐',
					goods_price: '188.00',
					goods_image: 'https://picsum.photos/seed/distorder2/100/100.jpg',
					commission: '37.60',
					commission_rate: '20',
					buyer_name: '李女士',
					status: 'pending',
					status_text: '待结算',
					status_class: 'pending',
					create_time: '2024-01-15 12:15:30',
					pay_time: '2024-01-15 12:16:45',
					settle_time: null
				},
				{
					id: 3,
					order_no: 'DIST202401140003',
					goods_title: '健身房月卡',
					goods_price: '299.00',
					goods_image: 'https://picsum.photos/seed/distorder3/100/100.jpg',
					commission: '44.85',
					commission_rate: '15',
					buyer_name: '王先生',
					status: 'expired',
					status_text: '已失效',
					status_class: 'expired',
					create_time: '2024-01-14 18:45:10',
					pay_time: null,
					settle_time: null
				},
				{
					id: 4,
					order_no: 'DIST202401140004',
					goods_title: '亲子乐园套票',
					goods_price: '88.00',
					goods_image: 'https://picsum.photos/seed/distorder4/100/100.jpg',
					commission: '26.40',
					commission_rate: '30',
					buyer_name: '赵女士',
					status: 'settled',
					status_text: '已结算',
					status_class: 'settled',
					create_time: '2024-01-14 16:20:35',
					pay_time: '2024-01-14 16:21:50',
					settle_time: '2024-01-15 10:30:00'
				}
			]
		};
	},
	computed: {
		...mapState(['memberInfo']),
		isLogin() {
			return this.memberInfo == null ? false : true;
		}
	},
	onLoad(options) {
		if (options.type) {
			this.selectIndex = parseInt(options.type);
		}
		this.loadOrders();
	},
	methods: {
		loadOrders() {
			// 实际项目中这里会调用API
		},
		
		scrollSelect(e) {
			this.selectIndex = e.currentTarget.dataset.index;
			this.loadOrders();
		},
		
		viewOrder(orderId) {
			uni.navigateTo({
				url: `/pages/member/distribution-order/detail?id=${orderId}`
			});
		},
		
		traceOrder(order) {
			uni.showToast({ 
				title: '物流追踪功能开发中', 
				icon: 'none' 
			});
		},
		
		viewEarnings(order) {
			uni.showModal({
				title: '佣金收益',
				content: `该订单佣金：¥${order.commission}\n佣金比例：${order.commission_rate}%\n结算时间：${order.settle_time}`,
				showCancel: false
			});
		},
		
		goDistribution() {
			uni.navigateTo({
				url: '/pages/distribution/products'
			});
		}
	}
};
</script>

<style>
.order-card {
	margin-bottom: 30rpx;
}

.order-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20rpx;
	padding-bottom: 15rpx;
	border-bottom: 1rpx solid #f5f5f5;
}

.order-number {
	font-size: 26rpx;
	color: #333;
}

.order-status {
	font-size: 24rpx;
	padding: 4rpx 12rpx;
	border-radius: 12rpx;
}

.order-status.pending {
	background: #fff3cd;
	color: #856404;
}

.order-status.settled {
	background: #d4edda;
	color: #155724;
}

.order-status.expired {
	background: #f8d7da;
	color: #721c24;
}

.order-content {
	display: flex;
	margin-bottom: 20rpx;
}

.goods-image {
	width: 120rpx;
	height: 120rpx;
	border-radius: 8rpx;
	margin-right: 20rpx;
	flex-shrink: 0;
}

.goods-info {
	flex: 1;
}

.goods-title {
	font-size: 28rpx;
	color: #333;
	margin-bottom: 10rpx;
	line-height: 1.3;
}

.goods-price {
	font-size: 26rpx;
	color: #ff4757;
	font-weight: 600;
	margin-bottom: 10rpx;
}

.commission-info {
	font-size: 24rpx;
	margin-bottom: 10rpx;
}

.commission-label {
	color: #666;
}

.commission-value {
	color: #2ed573;
	font-weight: 600;
	margin-left: 5rpx;
}

.commission-rate {
	color: #999;
}

.buyer-info {
	font-size: 24rpx;
}

.buyer-label {
	color: #666;
}

.buyer-name {
	color: #333;
}

.order-meta {
	background: #f8f9fa;
	border-radius: 8rpx;
	padding: 15rpx;
	margin-bottom: 20rpx;
}

.meta-item {
	display: flex;
	margin-bottom: 8rpx;
}

.meta-item:last-child {
	margin-bottom: 0;
}

.meta-item .label {
	font-size: 24rpx;
	color: #666;
	width: 120rpx;
	flex-shrink: 0;
}

.meta-item .value {
	font-size: 24rpx;
	color: #333;
	flex: 1;
}

.order-actions {
	display: flex;
	gap: 20rpx;
}

.action-btn {
	flex: 1;
	height: 60rpx;
	border-radius: 30rpx;
	font-size: 24rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
}

.view-btn {
	background: #f0f0f0;
	color: #333;
}

.trace-btn {
	background: #007aff;
	color: white;
}

.earnings-btn {
	background: #2ed573;
	color: white;
}

.unio2o-order-empty {
	height: calc(100vh - 100rpx);
	padding-top: 200rpx;
}

.unio2o-order-empty image {
	width: 240rpx;
	height: 240rpx;
}

.order-main {
	height: calc(100vh - 100rpx);
}
</style>